<template>
  <div class="notification layout-page">
    <div class="pt-40 nav-bar">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>通知中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main flex h-[750px]">
      <div class="left w-[428px] mr-10 px-[20px] py-[28px] bg-white rounded-[6px] h-full">
        <div class="flex items-center justify-between">
          <h4>通知中心</h4>
          <div class="flex items-center">
            <el-checkbox class="mr-20" v-model="isNoRead" label="仅看未读" size="large" />
            <el-button @click="handleAllReaded" link type="primary">全部已读</el-button>
          </div>
        </div>
        <div class="flex mt-20 gap-[10px] notice-type">
          <template :key="type._id" v-for="(type) in allTypes">
            <div @click="chooseType(type)" :class="{ active: type.active }">
              {{ type.name }}
            </div>
          </template>
        </div>
        <div>
          <template :key="notice._id" v-for="notice in noticeList">
            <div @click="chooseNotice(notice)" :class="{ active: notice.active }" class="notice-card">
              <div class="notice-title">
                <span>
                  {{ notice.title }}
                </span>
              </div>
              <div class="notice-time">
                <span>{{ notice.modifyTime }}</span>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="right w-full bg-white rounded-[6px] h-full flex-1 px-40 py-30" v-html="curNotice.content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from "@element-plus/icons-vue";
import api from "@/api/index";
import { onMounted, ref, watch } from "vue";
onMounted(async () => {
  await getAllType();
  getNoticeList()
});
let isNoRead = ref(false)
watch(isNoRead, (newVal) => {
  console.log(newVal)
  if (newVal) {
    noticeList.value = noticeList.value.filter(v => !v.isReaded)
  } else {
    getNoticeList()
  }
})
let noticeList = ref([]);
async function getNoticeList(typeId = "") {
  let { code, data } = await api.getNoticeList({
    typeId,
  });
  if (code == 200) {
    data.forEach((item) => {
      item.active = false;
    });
    noticeList.value = data;
    chooseNotice(noticeList.value[0]);
  }
}
let allTypes = ref([]);
async function getAllType() {
  let { code, data } = await api.getAllType();
  if (code == 200) {
    console.log(data);
    data.unshift({
      name: "全部",
      _id: "",
      active: true,
    });
    allTypes.value = data;
  }
}
let curNotice = ref({});
// 选择某个通知
function chooseNotice(item) {
  noticeList.value.forEach((item) => (item.active = false));
  item.active = true;
  curNotice.value = item;
  !item.isReaded && handleSetRead(item._id)
}
// 选择某个通知类型
function chooseType(type) {
  allTypes.value.forEach((item) => (item.active = false));
  type.active = true;
  getNoticeList(type._id);
}
async function handleSetRead(id) {
  let { code, data } = await api.setIsRead({
    id,
  });
  if (code == 200) {
    console.log(data);
  }
}
async function handleAllReaded() {

}
</script>

<style lang="scss" scoped>
.layout-page {
  width: 1180px;
  margin: 0 auto 40px;

  .nav-bar {
    padding-bottom: 48px;
  }

  .notice-type {
    display: flex;

    >div {
      padding: 8px 12px;
      line-height: 14px;
      background: #f4f5f6;
      border-radius: 14px;
      cursor: pointer;

      &.active {
        background: #121212 !important;
        color: #ffffff;
      }
    }
  }

  .notice-card {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #c2c5cc;
    padding: 20px 34px 20px 24px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;

    &.active {
      color: #0768ff;
    }

    .notice-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
      margin-bottom: 8px;
    }
  }
}
</style>
